import React from 'react'
import './ModifyPower.css'

import { DatePicker, Space, InputNumber, Button,Input } from 'antd';
import moment from 'moment';
import axios from '../../../utils/http'
import {UPDATEFATIVEBYID} from '../../../utils/api'


const { RangePicker } = DatePicker;


class ModifyPower extends React.Component {
    constructor() {
        super()
        this.state = {
            //商品名称
            // goodsName: '商品测试名称1',
            data:{}

        }
    }
     
        // 生命周期
  componentWillMount() {
        let obj = this.props.location.query.name
        // obj.goodsId = obj.key
        if (obj.factiveStatu === '进行中') {
          obj.factiveStatu = 1
        } else if (obj.factiveStatu ===  '未开始') {
            obj.factiveStatu = 2
        } else if (obj.factiveStatu === '已售空') {
            obj.factiveStatu = 3
        } else {
            obj.factiveStatu = 4
        }
    

      


    this.setState({
        data:{...this.props.location.query.name}
    })
  }

//   获取商品名称的输入值
hqInput=(e)=>{
      let obj = {...this.state.data}
      obj.obj=e.target.value
      this.setState({
          data:{...obj}
      })
}

       

    // 时间输入框
    onChange=(dateStrings)=> {
        // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
        let obj = {...this.state.data}
      obj.fativeStart=dateStrings[0]
      obj.fativeLast=dateStrings[1]
      this.setState({
          data:{...obj}
      })
    }
    // 人数输入框
    onChangePeopel=(value)=> {
        // console.log('changed', value);
        let obj = {...this.state.data}
        obj.fativeNum=value
        this.setState({
            data:{...obj}
        })
    }

     // 库存输入框
     onChangeKucun=(value)=> {
        // console.log('changed', value);
        let obj = {...this.state.data}
        obj.fativeIntv=value
        this.setState({
            data:{...obj}
        })
    }
    // 发起请求
    buttons=()=>{
        console.log(this.state.data);
        axios({
            url:UPDATEFATIVEBYID,
            method:'post',
            data:this.state.data
        }).then(data=>{
            console.log(data);
        })
    }

    render() {
        const {data} =this.state
        return (
            <div className='ModifyPower'>
                <div className='spName'><span> 商品名称: </span><span><Input defaultValue={data.obj} style={{ color: 'white',width:'40%' }} placeholder="请输入商品名称" onChange={this.hqInput} /></span></div>
                <div className='hdtime'><span>活动日期：</span>
                    <span>
                        <Space direction="vertical" size={12}>
                            <RangePicker
                              defaultValue={[moment(data.fativeStart),moment(data.fativeLast)]}
                                ranges={{
                                    Today: [moment(), moment()],
                                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                                }}
                                showTime
                                format="YYYY/MM/DD HH:mm:ss"
                                onChange={this.onChange}
                            />
                        </Space>
                    </span>
                </div>
                <div><span>阻力人数：</span><span>
                    <InputNumber min={1} max={30} style={{ background:'#1C1C2B'}} defaultValue={data.fativeNum} onChange={this.onChangePeopel} />
                </span></div>
                <div>
                    <span>阻力库存：</span>
                    <span><InputNumber min={0} style={{background:'#1C1C2B'}}  defaultValue={data.fativeIntv} onChange={this.onChangeKucun} /></span>
                </div>
                <Button type="primary" onClick={this.buttons}>确定</Button>


            </div>
        )
    }

}

export default ModifyPower